<!--  -->
<template>
<div class='clockIndex'>
  <c-title :text="info.plugin_name" :hide="false" ></c-title>
  <van-search
    v-model="query.title"
    show-action
    placeholder="请输入搜索活动"
    shape="round"
    @search="onSearch"
  >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>
  <div class="clock-main">
    <div class="clock-img" v-if="info.top_thumb_url">
      <img :src="info.top_thumb_url" />
    </div>
    <van-tabs 
      v-model="active" 
      line-width="15" 
      title-active-color="var(--themeBaseColor)" 
      color="var(--themeBaseColor)" 
      title-inactive-color="#00001C"
      @click="clockTabOn">
      <block v-for="(item,index) in clockTab" :key="index">
        <van-tab :title="item.name" :name="item.val"></van-tab>
      </block>
    </van-tabs>
    <div class="clock-list" v-if="clockList.length > 0">
      <block v-for="(item,index) in clockList" :key="index">
        <clock-item :itemObj="item" :index="index" :clockStatus="0">
          <template v-slot:tag>
            <span class="tag" :class="[item.status == 2?'orange':'',item.status == 1?'green':'']">{{item.status_name}}</span>
          </template>
        </clock-item>
      </block>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="mb-50"></div>
  </div>
</div>
</template>

<script>
import clockIndex_controller from "./clockIndex_controller";
export default clockIndex_controller;
</script>
<style lang="scss" scoped>
.clock-main ::v-deep .van-tabs__nav  {
  background-color: transparent;
}
.clock-main ::v-deep .van-tabs__line {
  bottom: 1.25rem;
}
.mb-50 {
  height: 3.125rem;
  clear: both;
}
/* @import url(); 引入公共css类 */
  .clock-main {
    margin:0.625rem 0.75rem 0 0.75rem;
    .clock-img {
      img {
        width:100%;
        height: auto;
        max-height: 100%;
        display: block;
        border-radius: 0.8125rem 0.8125rem 0.8125rem 0.8125rem;
      }
    }
    .clock-list {
      margin:0.375rem 0 0 0;
      
    }
  }
</style>